<!DOCTYPE html>
<html lang="en">

<head>
    <title>车次查询</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/statics/css/train.css" rel="stylesheet">
    <link href="/statics/css/nav.css" rel="stylesheet">
    <script src="/statics/js/Add.js"></script>
</head>

<body>
<div class="nav">
    <ul>
        <li>
            <div class="myhome">
                <img src="/statics/icons/主页.png">
                <a href="/index/main">首页</a>
            </div>
        </li>
        <li style="float:right">
            <a href="/user/login">登出</a>
        </li>
        <li style="float:right">
             <a href="/user/addmoney">余额 {{ user.balance }}</a>
        </li>
        <li style="float:right">
            <div> {{ user.username }}</div>
        </li>
        <li style="float:right">
            <a href="/ticket/myticket/{{ user.id }}">订单</a>
        </li>
    </ul>
</div>


<div id="container">
    <!-- 背景黑色遮罩 -->
    <div id="hidden"></div>
    <div id="box">
        <strong id="close">关闭</strong>
        <form id="buy_form" method="POST"
              action="/index/train/?origin={{ myorigin }}&destination={{ mydestination }}&begintime={{ myDate }}"
              onsubmit="return checkForm()">
            {% csrf_token %}
            <label>
                <p>你购买的车次为：</p>
                <p>出发时间：</p>
                <p>到达时间：</p>
            </label>
            <div class="seatclass">
                <div class="seatDiv">
                    <input type="radio" name="Seat" value="一等座">
                    <span>一等座票价：</span>
                </div>
                <div class="seatDiv">
                    <input type="radio" name="Seat" value="二等座" checked>
                    <span>二等座票价：</span>
                </div>
            </div>
            <input type="hidden" name="trainID" class="Tid">
            <input type="hidden" name="myname" value="{{ user.username }}">
            <div class="mysubmit">
                <input type="submit" value="购票" id="buy">
            </div>
        </form>
    </div>
</div>

<div class="mytable">
    <table id="table_result" class="table table-bordered table-hover">
        <tr>
            <th>车次号</th>
            <th>可载人数</th>
            <th>出发时间</th>
            <th>到达时间</th>
            <th>出发地</th>
            <th>目的地</th>
            <th>一等座</th>
            <th>二等座</th>
            <th>操作</th>
        </tr>
        {% for i in page %}
            <tr>
                <td>{{ i.train }}</td>
                <td>{{ i.maxpeople }}</td>
                <td>{{ i.begintime|date:"Y-m-d H:m:s" }}</td>
                <td>{{ i.endtime|date:"Y-m-d H:m:s" }}</td>
                <td>{{ i.origin }}</td>
                <td>{{ i.destination }}</td>
                <td>{{ i.firstclassprice }}</td>
                <td>{{ i.secondclassprice }}</td>
                <td hidden>{{ i.id }}</td>
                <td class="buybutton{{ i }}" onclick="capture(this)">
                    <button>订票</button>
                </td>
            </tr>
        {% endfor %}
    </table>
</div>


<div class="mypage">
    {% if page.has_previous %}
        <a href="?origin={{ myorigin }}&destination={{ mydestination }}&begintime={{ myDate }}&page=1">|&lt;第一页</a>
        <a href="?origin={{ myorigin }}&destination={{ mydestination }}&begintime={{ myDate }}&page={{ page.previous_page_number }}">前一页</a>
    {% endif %}
    Page {{ page.number }} of {{ page.paginator.num_pages }}
    {% if page.has_next %}
        <a href="?origin={{ myorigin }}&destination={{ mydestination }}&begintime={{ myDate }}&page={{ page.next_page_number }}">下一页</a>
        <a href="?origin={{ myorigin }}&destination={{ mydestination }}&begintime={{ myDate }}&page={{ page.paginator.num_pages }}">最末页&gt;|</a>
    {% endif %}
</div>

<div hidden id="res">{{ result }}</div>

<script>
    {# 点击订票 #}

    function capture(data) {
        var box = my$('box');
        var hidden = my$('hidden');
        var close = my$('close');
        var mybutton = document.getElementsByClassName(data.className);
        box.style.display = 'flex';
        hidden.style.display = 'block';
        var parent = mybutton[0].parentNode;
        var brother1 = parent.children[0].innerText;
        var brother2 = parent.children[2].innerText;
        var brother3 = parent.children[3].innerText;
        var brother4 = parent.children[6].innerText;
        var brother5 = parent.children[7].innerText;
        var brother6 = parent.children[8].innerText;
        var form = document.getElementById('buy_form');
        var label = form.children[1];
        var p1 = label.children[0];
        p1.innerText = p1.innerText.substr(0, 8) + brother1;
        var p2 = label.children[1];
        p2.innerText = p2.innerText.substr(0, 5) + brother2;
        var p3 = label.children[2];
        p3.innerText = p3.innerText.substr(0, 5) + brother3;
        var seatdiv = document.getElementsByClassName("seatclass")[0];
        var seatDiv1 = seatdiv.children[0];
        var span1 = seatDiv1.children[1];
        span1.innerText = span1.innerHTML.substr(0, 6) + brother4;
        var seatDiv2 = seatdiv.children[1];
        var span2 = seatDiv2.children[1];
        span2.innerText = span2.innerText.substr(0, 6) + brother5;
        var get_trainID = form.getElementsByClassName("Tid")[0]
        get_trainID.value = brother6;
    }
</script>

<script>
    var close = my$('close');
    close.onclick = function () {
        box.style.display = 'none';
        hidden.style.display = 'none';
        box.style.top = '200px';
        box.style.left = '';
    }

    function checkForm() {
        var form = document.getElementById('buy_form');
        form.submit();
    }
</script>

<script>
    var open = my$('open');
    var box = my$('box');
    var hidden = my$('hidden');
    var close = my$('close');
    open.onclick = function () {
        box.style.display = 'flex';
        hidden.style.display = 'block';
    }
    close.onclick = function () {
        box.style.display = 'none';
        hidden.style.display = 'none';
        box.style.top = '200px';
        box.style.left = '';
    }
</script>

<script>
    result = document.getElementById("res")
    result = result.innerHTML
    if (result == "余额不足") {
        alert("余额不足");
    } else if (result == "余票不足") {
        alert("余票不足");
    } else if (result == "已经购买该车次，不能重复购票") {
        alert("已经购买该车次，不能重复购票");
    } else if (result == "订票成功") {
        alert("订票成功");
    }
</script>

</body>

</html>